<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:playPause();"><img id="musicImg" src="img/music2.png" /></a>
		<audio id="music" src="music.wav"  loop="loop">你的浏览器不支持audio标签。</audio> 

		<script type="text/javascript" src="js/zepto.min.js" ></script>
		<script>
			
			//初始角度
			var degree = 0;
			var timer;
			$(function(){
				playPause();
			});
			
			/**
			 * 音乐暂停/播放
			 */
			function playPause(){
				var music = document.getElementById('music'); 
			    if (music.paused){ 
			        music.play(); 
			        timer = setInterval(function(){
					    degree += 5;
					    $('#musicImg').css("transform","rotate("+degree+"deg)");
					}, 20);
			    } else{
			        music.pause();
			        degree = 0;
			        $('#musicImg').css("transform","rotate(0deg)");
			        window.clearInterval(timer);
			    }
			}
		</script>
	</body>
</html>
